/* 等页面加载完毕之后再执行JS  */

// 播放列表
let playList = ['./audio/19歳になりたくない.mp3', './audio/Official髭男dism - イエスタデイ (Yesterday).ogg', './audio/One Last Kis...-宇多田ヒカル.mp3']
let songNames = ['19歳になりたくない', 'イエスタデイ (Yesterday)', 'One Last Kiss']

// 1.先获得页面的dom对象
// 播放器对象
let audio = document.querySelector('#audio')

// 暂停
let pause = document.querySelector('#pause')
// 播放
let play = document.querySelector('#play')
// 上一首
let front = document.querySelector('#front')
// 下一首
let next = document.querySelector('#next')
// 歌曲名称
let songName = document.querySelector('#songName')
// 进度条
let progress = document.querySelector('#progress')
// 滑块
let silder = document.getElementById('silder')

let index = 0
audio.volume = 0.8
audio.src = playList[index]

play.onclick = function () {
  // 1.将播放按键设置为display:none,之后将暂停键显示出来
  HiddenPlay(true)
  // 2.改变歌曲名称
  ChangeSongName(index)
  audio.play()
}

pause.onclick = function () {
  // 1.展示播放按钮，隐藏暂停按钮
  HiddenPlay(false)
  audio.pause()
}

audio.addEventListener('timeupdate', function () {
  // 1.实时的改变滑块的位置
  ChangSilder()
})

// 切换歌曲
next.onclick = function () {
  toggleMusic(true)
  audio.play()
}

front.onclick = function () {
  toggleMusic(false)
  audio.play()
}

progress.addEventListener('click', (e) => {
  ChangePlayPosition(e)
})

let HiddenPlay = (isPlayHidden) => {
  if (isPlayHidden) {
    play.style.display = 'none'
    pause.style.display = 'block'
  } else {
    play.style.display = 'block'
    pause.style.display = 'none'
  }
}

let ChangSilder = () => {
  // 1.实时获取当前的时间
  let currentTime = audio.currentTime
  // 2.获取音乐的总时长
  let duration = audio.duration
  // 3.用progress的总长度 * 比值
  changWidth = 210 * (currentTime / duration)
  silder.style.width = changWidth + 'px'
}

let ChangeSongName = (index) => {
  songName.innerHTML = songNames[index]
}

let toggleMusic = (isNext) => {
  if (isNext && index <= 1) {
    ++index
    audio.src = playList[index]
  } else if (!isNext && index > 0) {
    --index
    audio.src = playList[index]
  }
  ChangeSongName(index)
  HiddenPlay(true)
}

// 点击进度条设置音乐播放的位置
let ChangePlayPosition = (e) => {
  // 1.设置silder的宽度
  silder.style.width = e.offsetX
  // 2.改变当前音乐1的时间
  let duration = audio.duration
  audio.currentTime = (e.offsetX / 210) * duration
}
